<template>
  <div class="container">
    <!--上传按钮  -->
    <el-button type="primary" size="small" @click="exportExcle"
      >生成表格</el-button
    >
    <!-- 筛选 -->
    <div class="example-block">
      <span class="example-demonstration">筛选：</span>
      <el-cascader
        ref="cascader"
        v-model="selectValue"
        :options="selectYearMonth"
        :props="props"
        size="small"
        @change="handleChange"
      ></el-cascader>
      <el-button type="primary" size="small" @click="delClear">重置</el-button>
    </div>
    <!-- 表格table -->
    <el-table
      :data="StatisticsListPage"
      :header-cell-style="{ background: '#F5F7FA' }"
    >
      <el-table-column
        type="index"
        :index="indexNum"
        label="序号"
        align="center"
      />
      <el-table-column prop="year" label="年份" align="center" />
      <el-table-column prop="month" label="月份" align="center" />
      <el-table-column prop="roomNumber" label="房间号" align="center" />
      <el-table-column prop="health" label="卫生费" align="center" />
      <el-table-column prop="management" label="管理费" align="center" />
      <el-table-column prop="elevator" label="电梯费" align="center" />
      <el-table-column prop="sharedElecty" label="公摊水电费" align="center" />
      <el-table-column
        prop="lastElectyNumber"
        label="上个月用电数"
        align="center"
      />
      <el-table-column
        prop="theElectyNumber"
        label="本月用电数"
        align="center"
      />
      <el-table-column
        prop="lastWaterNumber"
        label="上个月用水数"
        align="center"
      />
      <el-table-column
        prop="theWaterNumber"
        label="本月用水数"
        align="center"
      />
      <el-table-column prop="electyRate" label="电费" align="center" />
      <el-table-column prop="waterRate" label="水费" align="center" />
      <el-table-column prop="rent" label="租金" align="center" />
      <el-table-column prop="total" label="总计" align="center" />
      <el-table-column fixed="right" label="操作" width="120px" align="center">
        <template #default="scope">
          <el-button
            type="text"
            size="small"
            @click.prevent="editorUser(scope.row)"
          >
            查看
          </el-button>
          <el-popconfirm
            title="确定删除?"
            @confirm="deleteCostInfo(scope.row.id)"
          >
            <template #reference>
              <el-button type="text" size="small"> 删除 </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      v-model:currentPage="currentpage"
      :page-sizes="pageSizeDefault"
      :page-size="pageSize"
      background
      layout="total,sizes, prev, pager, next, jumper"
      :total="initStatisticsListLength"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    >
    </el-pagination>
    <!-- 对话框 -->
    <el-dialog
      v-model="dialogFormVisible"
      title="查看详情"
      top="3vh"
      width="60%"
    >
      <Details :detail="detailData"></Details>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { dataStatistics, deleteCost, getCostDataAnalysis, userExportExcle } from "@/api";
import { defineComponent, onMounted, ref } from "vue";
import Details from "@/components/statisticsInfo/Details.vue";
import { ElMessage } from "element-plus";

export default defineComponent({
  components: { Details },
  setup() {
    const StatisticsList = ref([]);
    const StatisticsListPage = ref<any>([]);
    const currentpage = ref(1);
    const pageSize = ref(3);
    const pageSizeDefault = ref([3, 5, 10, 15, 20]);
    const initStatisticsListLength = ref(0);
    const oldPage = ref(-1);
    const dialogFormVisible = ref(false);
    const detailData = ref({});
    const props = {
      expandTrigger: "hover",
    };
    const selectValue = ref([]);
    const selectYearMonth = ref([] as any);
    const year = ref(0);
    const month = ref(0);
    const cascader = ref<any>();
    // 获取级联选择器内容
    const cascaderList = async () => {
      await dataStatistics().then((res) => {
        const selectYear: any = [];
        let obj: any = {};
        res.forEach((item: any) => {
          selectYear.push({
            value: item.year,
            label: item.year + "年",
            children: [],
          });
        });

        res.forEach((i: any) => {
          selectYear.forEach((j: any) => {
            if (i.year == j.value) {
              j.children.push({ value: i.month, label: i.month + "月" });
            }
          });
        });
        for (let i = 0; i < selectYear.length; i++) {
          if (!obj[selectYear[i].value]) {
            selectYearMonth.value.push(selectYear[i]);
            obj[selectYear[i].value] = true;
          }
        }
        selectYearMonth.value.forEach((item: any) => {
          if (item.children) {
            for (let i = 0; i < item.children.length; i++) {
              for (let j = i + 1; j < item.children.length; j++) {
                if (item.children[i].value == item.children[j].value) {
                  item.children.splice(j, 1);
                  j--;
                }
              }
            }
          }
        });
      });
    };
    // 初始化获取全部数据
    const initStatisticsList = async () => {
      await dataStatistics().then((res) => {
        StatisticsList.value = res;
        initStatisticsListLength.value = res.length;
        if (oldPage.value == -1) {
          handleCurrentChange(1);
        } else {
          handleCurrentChange(oldPage.value);
        }
      });
    };
    // ui组件table 序号
    const indexNum = (index: number) => {
      return (currentpage.value - 1) * pageSize.value + index + 1;
    };
    //处理数据,分页
    const handleTableData = () => {
      StatisticsListPage.value = StatisticsList.value.slice(
        (currentpage.value - 1) * pageSize.value,
        currentpage.value * pageSize.value
      );
    };
    // 每页显示多少条
    const handleSizeChange = (val: number) => {
      pageSize.value = val;
      handleTableData();
    };
    //点击中间页的按钮 执行的方法
    const handleCurrentChange = (val: number) => {
      oldPage.value = val;
      currentpage.value = val;
      handleTableData();
    };
    // 删除
    const deleteCostInfo = async (val: number) => {
      await deleteCost(val).then((res) => {
        if (res.data === 1) {
          ElMessage.success("删除成功！");
        }
        initStatisticsList();
      });
    };
    // 查看
    const editorUser = async (val: any) => {
      detailData.value = val;
      dialogFormVisible.value = true;
    };
    // 触发联动选择筛选的函数
    const handleChange = async (val: any) => {
      const list = cascader.value.$refs.panel.getCheckedNodes();
      if (list != "") {
        year.value = val[0];
        month.value = val[1];
      } else {
        year.value = 0;
        month.value = 0;
        initStatisticsList();
      }
      await getCostDataAnalysis(year.value, month.value).then((res) => {
        StatisticsList.value = res;
        initStatisticsListLength.value = res.length;
        if (oldPage.value == -1) {
          handleCurrentChange(1);
        } else {
          handleCurrentChange(oldPage.value);
        }
      });
    };
    // 重置清空
    const delClear = () => {
      year.value = 0;
      month.value = 0;
      cascader.value.$refs.panel.clearCheckedNodes();
      initStatisticsList();
    };
    // 导出Excel
    const exportExcle = async () => {
      await userExportExcle(year.value,month.value).then((res) => {
        if (res) {
          ElMessage.success("生成成功，在电脑桌面cxcel_data文件夹中！");
        }else{
          ElMessage.error("生成失败！");
        }
      })
    };
    onMounted(() => {
      cascaderList();
      initStatisticsList();
    });
    return {
      StatisticsList,
      StatisticsListPage,
      indexNum,
      pageSize,
      pageSizeDefault,
      currentpage,
      initStatisticsListLength,
      handleCurrentChange,
      handleSizeChange,
      oldPage,
      deleteCostInfo,
      dialogFormVisible,
      editorUser,
      detailData,
      exportExcle,
      props,
      selectValue,
      handleChange,
      selectYearMonth,
      year,
      month,
      cascader,
      delClear,
    };
  },
});
</script>

<style lang="scss" scoped>
.container {
  display: block;
  .el-button {
    margin-bottom: 6px;
  }
  .el-table {
    margin-bottom: 20px;
  }
  .el-pagination {
    display: flex;
    justify-content: flex-end;
  }
  .example-block {
    margin: 10px 0;
    span {
      font-size: 15px;
      color: #929399;
    }
  }
  ::v-deep .el-cascader--small {
    margin-right: 10px;
  }
}
</style>